<template>
  <!-- 7zeh广告列表 -->
  <div class="breadcrumb">
    <Breadcrumb :aaa='aaa' :msgg="msg" :txt="txt" :path1="path1" />
  </div>
  <el-card class="box-card" style="margin-top: 20px; margin-left: 20px; margin-right: 20px;">
    <div style="display: flex; justify-content: space-between;">
      <p style="line-height: 30px;"><el-icon>
          <Search />
        </el-icon>筛选搜索</p>
      <div>
        <el-button @click="chongzhi">重置</el-button>
        <el-button type="primary" @click="onSearch">查询搜索</el-button>
      </div>
    </div>
    <div>
      <el-form label-width="100px" style="display: flex;">
        <el-form-item label="广告名称">
          <el-input type="text" placeholder="广告名称" v-model="name" style="width: 200px;"></el-input>
        </el-form-item>
        <el-form-item label="广告位置">
          <el-select v-model="type" class="m-2" placeholder="全部" style="width: 200px;">
            <el-option label="PC首页轮播" value="0">PC首页轮播</el-option>
            <el-option label="APP首页轮播" value="1">APP首页轮播</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="到期时间">
          <el-date-picker v-model="time" type="datetime" placeholder="请选择时间" style="width: 200px;" />
        </el-form-item>
      </el-form>
    </div>
  </el-card>
  <el-card style="margin-top: 20px; margin-left: 20px; margin-right: 20px;">
    <div style="display: flex; justify-content: space-between; margin-top: ;">
      <p style="line-height: 30px;"><el-icon>
          <Memo />
        </el-icon>数据列表</p>
      <div>
        <el-button type="primary" @click="add">添加</el-button>
      </div>
    </div>
  </el-card>
  <!-- 表格 -->
  <div>
    <el-table border @selection-change="handleSelectionChange" :data="tableData" ref="multipleTableRef"
      style=" margin-top: 20px;margin-left: 20px; width: 86vw; margin-right: 20px;">
      <el-table-column type="selection" prop="ischeck" width="55" />
      <el-table-column prop="id" label="编号" width="120" />
      <el-table-column prop="name" label="广告名称" />
      <el-table-column label="广告位置">
        <template #default="scope">
          <el-text prop="type">{{ scope.row.type === 1 ? 'APP首页轮播' : 'PC首页轮播' }} </el-text>
        </template>
      </el-table-column>

      <el-table-column label="广告图片" width="300">
        <template #default="scope">
          <img style="width: 200px; height: 100px;" :src="scope.row.pic" alt="">
        </template>
      </el-table-column>
      <el-table-column label="添加时间">
        <!-- slot 插槽写法  scope就是作用域插槽 ， scope.row 就是数据 -->
        <template #default="scope">
          <div>
            <span>开始时间</span>
            {{
              scope.row.startTime
              ? dayjs(scope.row.startTime).format("YYYY-MM-DD HH:mm:ss")
              : "/"
            }}
            <p>结束时间<span> {{
              scope.row.endTime
              ? dayjs(scope.row.endTime).format("YYYY-MM-DD HH:mm:ss")
              : "/"
            }}</span></p>

          </div>
        </template>
      </el-table-column>
      <el-table-column label="是否启用" width="100">
        <template #default="scope">
          <el-switch @change="xiugaistatus(scope.row)" prop="status" :value="scope.row.status === 1 ? true : false" />
        </template>
      </el-table-column>
      <el-table-column prop="clickCount" label="点击次数" width="120" />
      <el-table-column prop="orderCount" label="生成订单" width="120" />
      <el-table-column label="操作" width="180" flex="right">
        <template #default="scope">
          <el-button @click="del(scope.row)">删除</el-button>
          <el-button @click="bianji(scope.row.id)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div style="display: flex; justify-content: space-between; margin-top: 20px;">
    <div>
      <el-form-item>
        <el-select v-model="value2" class="m-2" placeholder="全部" size="large" style="margin-left: 20px;;">
          <el-option value="批量删除"></el-option>
        </el-select>
        <el-button type="primary" @click="queding">确定</el-button>
      </el-form-item>
    </div>
    <div>
      <el-pagination v-model:current-page="pagination.pageNum" v-model:page-size="pagination.pageSize" background
        :page-sizes="[1, 5, 10, 20]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" style="margin-right: 20px;" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { Search, Memo } from "@element-plus/icons-vue";
import * as advertisement from '../../request/api'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Controller } from '../../request/SmsHomeAdvertiseController/index'
import { useRouter } from 'vue-router'
import type { Ref } from "vue";
import dayjs from "dayjs";
import useTable from "../../hooks/useTables";
import { ref, onMounted } from 'vue'


let msg = ref('广告列表')
let txt = ref('营销')
let path1 = ref('sms/flash')
let aaa = ref(0)
let modalForm = ref({}) as Ref<Controller>;
let name = ref('')
let type = ref()
let value2 = ref('')
let router = useRouter()
let {
  tableData,
  getTableData,
  pagination,
  handleSizeChange,
  handleCurrentChange,
} = useTable(advertisement.ment.getControllerlist, {
  name, type
});

let value = ref('')

let time = ref('')
// 删除
let del = (row: Controller) => {
  ElMessageBox.confirm(
    '你确定要删除吗?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      await advertisement.ment.getControllerdel(row.id)
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
      router.go(0)
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '删除失败',
      })
    })
}

// 修改状态
let xiugaistatus = async (row: Controller) => {
  if (row.status === 0) {
    row.status = 1
    await advertisement.ment.getControllerUpdatestatus(row)
    ElMessage({
      message: '状态修改完成',
      type: 'success',
    })
  } else {
    row.status = 0
    await advertisement.ment.getControllerUpdatestatus(row)
    ElMessage({
      message: '状态修改完成',
      type: 'success',
    })
  }
}
getTableData()
//查询
let onSearch = async () => {

  getTableData();

}
//添加
let add = () => {
  router.push('/sms/addAdvertise')
}
let bianji = async (id: any) => {
  getTableData()
  console.log(id);
  router.push({ path: '/sms/updateAdvertise', query: { id } })
}
//批量删除
let ids = ref([])
const handleSelectionChange = (val: any) => {
  let a = val.map((item: any) => {
    return item.id
  })
  ids.value = a
  console.log(ids.value);
}

let queding = () => {
  ids.value.forEach(async (item) => {
    console.log(item);
    await advertisement.ment.getControllerdel(item)
    router.go(0)
    ElMessage({
      message: '批量删除成功',
      type: 'success',
    })
  })



  getTableData()
}
//重置
let chongzhi = () => {
  name.value = '',
    type.value = '',
    time.value = ''
}

</script>

<style scoped >
.breadcrumb {
  height: 45px;
  border-bottom: 1px solid #ebeef5;
  font-size: 20px;
}

:deep .el-table .el-table__cell {
  text-align: center !important;
}

:deep .el-table thead {
  font-weight: bold !important;
}

.el-table {
  width: 1000px;
}
</style>